<template>
  <div class="love-page">
    <!-- 背景粒子 -->
    <div id="particles-js-love" class="particles"></div>
    
    <!-- 返回按钮 -->
    <router-link to="/" class="back-btn">
      <span>← 返回</span>
    </router-link>
    
    <!-- 主要内容 -->
    <div class="love-content">
      <div class="love-letter" data-aos="fade-in" data-aos-duration="2000">
        <div class="letter-header">
          <h1 class="love-title">💕 我爱你 💕</h1>
          <div class="heart-container">
            <div class="big-heart heart-beat">❤️</div>
          </div>
        </div>
        
        <div class="letter-body">
          <div class="message-section" data-aos="fade-up" data-aos-delay="500">
            <h2 class="message-title">亲爱的宝贝：</h2>
            <div class="message-text">
              <p class="typing-message" ref="typingMessage"></p>
            </div>
          </div>
          
          <div class="reasons-section" data-aos="fade-up" data-aos-delay="1000">
            <h3 class="reasons-title">为什么我爱你：</h3>
            <div class="reasons-list">
              <div 
                v-for="(reason, index) in loveReasons" 
                :key="index"
                class="reason-item"
                :data-aos="index % 2 === 0 ? 'slide-in-left' : 'slide-in-right'"
                :data-aos-delay="1500 + index * 200"
              >
                <div class="reason-icon">{{ reason.icon }}</div>
                <div class="reason-text">{{ reason.text }}</div>
              </div>
            </div>
          </div>
          
          <div class="promise-section" data-aos="fade-up" data-aos-delay="2000">
            <h3 class="promise-title">我的承诺：</h3>
            <div class="promises">
              <div 
                v-for="(promise, index) in promises" 
                :key="index"
                class="promise-item"
                :data-aos="'zoom-in'"
                :data-aos-delay="2500 + index * 300"
              >
                <div class="promise-icon">✨</div>
                <div class="promise-text">{{ promise }}</div>
              </div>
            </div>
          </div>
          
          <div class="final-message" data-aos="fade-up" data-aos-delay="3000">
            <div class="final-text" ref="finalText"></div>
            <div class="love-buttons">
              <button class="love-btn yes-btn" @click="showLove" :class="{ 'clicked': isClicked }">
                💖 我也爱你
              </button>
              <button class="love-btn no-btn" @mouseover="moveButton" ref="noBtn">
                😢 考虑一下
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 爱心雨效果 -->
    <div class="heart-rain" v-if="showHeartRain">
      <div 
        v-for="i in 50" 
        :key="i" 
        class="rain-heart"
        :style="getRainHeartStyle(i)"
      >
        ❤️
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import Typed from 'typed.js'
import { gsap } from 'gsap'
import { initParticles } from '../utils/particles.js'
import { loveConfig, loveUtils } from '../config/love-config.js'

export default {
  name: 'Love',
  setup() {
    const typingMessage = ref(null)
    const finalText = ref(null)
    const noBtn = ref(null)
    const showHeartRain = ref(false)
    const isClicked = ref(false)
    
    let typedMessage = null
    let typedFinal = null
    
    const loveReasons = [
      { icon: '😊', text: '你的笑容是我每天最想看到的风景' },
      { icon: '💝', text: '你总是能在我最需要的时候给我温暖' },
      { icon: '🌟', text: '你的善良和温柔让我深深着迷' },
      { icon: '🎵', text: '和你在一起的每一刻都像美妙的音乐' },
      { icon: '🌈', text: '你让我的世界充满了色彩和希望' },
      { icon: '💕', text: '你的每一个小动作都让我心动不已' }
    ]
    
    // 确保配置存在
    const vows = loveConfig?.vows || [
      '我会永远保护你，不让你受到任何伤害',
      '我会用一生的时间来爱你，珍惜你',
      '我会努力成为更好的人，配得上你的爱',
      '我会陪你走过人生的每一个春夏秋冬',
      '我会让你成为世界上最幸福的人'
    ]
    
    const promises = vows
    
    const getRainHeartStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's',
        animationDuration: (Math.random() * 2 + 2) + 's',
        fontSize: (Math.random() * 20 + 15) + 'px'
      }
    }
    
    const moveButton = () => {
      const btn = noBtn.value
      const x = Math.random() * (window.innerWidth - btn.offsetWidth)
      const y = Math.random() * (window.innerHeight - btn.offsetHeight)
      
      gsap.to(btn, {
        x: x,
        y: y,
        duration: 0.5,
        ease: 'power2.out'
      })
    }
    
    const showLove = () => {
      isClicked.value = true
      showHeartRain.value = true
      
      gsap.to('.love-content', {
        scale: 1.1,
        duration: 0.5,
        yoyo: true,
        repeat: 1
      })
      
      setTimeout(() => {
        showHeartRain.value = false
      }, 5000)
    }
    
    onMounted(() => {
      // 初始化粒子效果
      initParticles('particles-js-love')
      
      // 初始化打字效果
      typedMessage = new Typed(typingMessage.value, {
        strings: [
          '从遇见你的那一刻起，我就知道你是我的命中注定。你的每一个微笑，每一个眼神，都深深地印在我的心里。我想告诉你，我爱你，比我想象的还要深。'
        ],
        typeSpeed: 30,
        showCursor: false
      })
      
      typedFinal = new Typed(finalText.value, {
        strings: [
          '亲爱的，我想和你一起走过人生的每一个阶段，分享每一个快乐和悲伤。你愿意和我一起创造属于我们的美好未来吗？'
        ],
        typeSpeed: 25,
        showCursor: false,
        startDelay: 8000
      })
    })
    
    onUnmounted(() => {
      if (typedMessage) typedMessage.destroy()
      if (typedFinal) typedFinal.destroy()
    })
    
    return {
      typingMessage,
      finalText,
      noBtn,
      showHeartRain,
      isClicked,
      loveReasons,
      promises,
      getRainHeartStyle,
      moveButton,
      showLove,
      loveConfig,
      loveUtils
    }
  }
}
</script>

<style scoped>
.love-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  padding: 2rem;
}

.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 100;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-5px);
}

.love-content {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 4rem;
}

.love-letter {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.letter-header {
  text-align: center;
  margin-bottom: 3rem;
}

.love-title {
  font-size: 3rem;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.heart-container {
  display: flex;
  justify-content: center;
}

.big-heart {
  font-size: 4rem;
  animation: heartBeat 1.5s ease-in-out infinite;
}

.message-section {
  margin-bottom: 3rem;
}

.message-title {
  font-size: 1.8rem;
  color: #ff6b9d;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.message-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: white;
  text-align: justify;
  font-family: 'LoveFont', cursive;
}

.reasons-section {
  margin-bottom: 3rem;
}

.reasons-title {
  font-size: 1.8rem;
  color: #4ecdc4;
  margin-bottom: 2rem;
  text-align: center;
  font-family: 'LoveFont', cursive;
}

.reasons-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.reason-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.reason-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.reason-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.reason-text {
  color: white;
  font-size: 1.1rem;
  line-height: 1.5;
}

.promise-section {
  margin-bottom: 3rem;
}

.promise-title {
  font-size: 1.8rem;
  color: #a8edea;
  margin-bottom: 2rem;
  text-align: center;
  font-family: 'LoveFont', cursive;
}

.promises {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.promise-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.promise-item:hover {
  transform: translateX(10px);
  background: rgba(255, 255, 255, 0.15);
}

.promise-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.promise-text {
  color: white;
  font-size: 1rem;
  line-height: 1.5;
}

.final-message {
  text-align: center;
  margin-top: 3rem;
}

.final-text {
  font-size: 1.3rem;
  color: white;
  line-height: 1.8;
  margin-bottom: 2rem;
  min-height: 4rem;
  font-family: 'LoveFont', cursive;
}

.love-buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.love-btn {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: 'LoveFont', cursive;
}

.yes-btn {
  background: linear-gradient(45deg, #ff6b9d, #c44569);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
}

.yes-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);
}

.yes-btn.clicked {
  animation: celebrate 0.5s ease-in-out;
}

.no-btn {
  background: linear-gradient(45deg, #95a5a6, #7f8c8d);
  color: white;
  box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
}

.no-btn:hover {
  transform: scale(1.05);
}

@keyframes celebrate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* 爱心雨效果 */
.heart-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

.rain-heart {
  position: absolute;
  color: #ff6b9d;
  animation: rain 4s linear infinite;
}

@keyframes rain {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .love-page {
    padding: 1rem;
  }
  
  .love-letter {
    padding: 2rem;
  }
  
  .love-title {
    font-size: 2rem;
  }
  
  .big-heart {
    font-size: 3rem;
  }
  
  .reasons-list {
    grid-template-columns: 1fr;
  }
  
  .love-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .love-btn {
    width: 100%;
    max-width: 250px;
  }
}
</style>
